JavaScript新知：sessionStorage and localStorage

对象sessionStorage是一次会话内的存储，它主要用于在一次会话内的多个页面内共享数据。

如下案例使用了vue.js,你需要了解vue.js。此案例会有两个文件：

touch a.html b.html

文件a.html内容为：

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <div id="app">
        <span>{{count}}</span><button @click="inc">+</button>
        <a href="b.html">go to B</a>
    </div>
    <script>
        // var s= localStorage
        var s= sessionStorage
        new Vue({
            el:'#app',
            data(){
                console.log(s.count)
                if (!s.count || (isNaN(s.count))){
                    s.count = 0
                    return {count:0}
                }
                else
                    return {count:s.count}
            },
            methods:{
                inc:function(){
                    this.count++
                    s.count = this.count
                }
            }
        })
    </script>
    

此文件的按钮点击一次，为span标签的值加一，并且设置新值到sessionStorage.count内。

文件b.html则负责显示当前的sessionStorage.count值：

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <div id="app">
        <span>page A 's session value {{count}}</span>
        <a href="a.html">Back to A</a>
    </div>
    <script>
        // var s= localStorage
        var s= sessionStorage
        new Vue({
            el:'#app',
            data(){
                return {count:s.count}
            }
        })
    </script>
    

安装并启动http server

npm i http-server -g
http-server

访问localhost:8080/a.html ,我们点击按钮设置sessionStorage.count之后，导航到b页面，会发现显示的值是a页面内设置的值。这说明在同一个会话内的页面间是可以通过sessionStorage来共享数据的。

如果打开一个新的页面，在访问b，显示的值就不能和a页面设置的相同，这是因为新开的页面和原来的a页面的会话并不一致。如果需要在这样的情况下也可以访问，那么需要把sessionStorage改为localStorage。你不妨试试。